<template>
    <el-form  size="small" label-width="120px" label-position="left" >
        <el-row>
            <el-col :span="24">
                <el-form-item label="编号：">
                    <el-input v-model="props.data.options.ref" class="little-bear-r-name-input" readonly>
                        <template #suffix>
                            <el-tooltip content="复制编号" placement="top">
                                <my-icon class="fc-icon icon-copy" name="el-icon-CopyDocument" size="14" @click="handleCopy('ref')" />
                            </el-tooltip>                        
                        </template>
                        <template #append>
                            <el-tooltip content="刷新编号" placement="top">
                                <my-icon class="fc-icon" name="el-icon-RefreshRight" size="14" @click="handleRefresh('ref')" />
                            </el-tooltip>                                    
                        </template>
                    </el-input>
                </el-form-item>

                <el-divider v-if="['main', 'subform'].includes(props.data.group)">基础设置</el-divider>
            
                <el-form-item v-if="['main', 'subform'].includes(props.data.group)" label="标签名称：">
                    <el-input v-model="props.data.options.label" clearable/>
                </el-form-item>

                <el-form-item v-if="['main', 'subform'].includes(props.data.group)" label="标签宽度：">
                    <el-input type="number" v-model="props.data.options.labelWidth.value" clearable>
                        <template #append>
                            <el-select v-model="props.data.options.labelWidth.unit" style="width: 60px;">
                                <el-option label="px" value="px" />
                                <el-option label="auto" value="auto" />
                                <el-option label="%" value="%" />
                                <el-option label="vh" value="vh" />
                                <el-option label="vw" value="vw" />
                                <el-option label="em" value="em" />
                                <el-option label="rem" value="rem" />
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item v-if="['main', 'subform'].includes(props.data.group)" label="是否隐藏标签：">
                    <el-switch v-model="props.data.options.labelHide" />
                </el-form-item>

                <el-form-item v-if="['main', 'subform'].includes(props.data.group)" label="提示信息：">
                    <el-input v-model="props.data.options.prompt" clearable/>
                </el-form-item>

                <el-form-item v-if="['main', 'subform'].includes(props.data.group)" label="关联数据：">
                    <el-button type="primary" plain @click="handleCodelOpen('editData')">编辑数据</el-button>
                </el-form-item>

                <slot name="base" />

                <el-divider>属性设置</el-divider>

                <el-form-item label="ID：">
                    <el-input v-model="props.data.options.id" class="little-bear-r-name-input" readonly>
                        <template #suffix>
                            <el-tooltip content="复制ID" placement="top">
                                <my-icon class="fc-icon icon-copy" name="el-icon-CopyDocument" size="14" @click="handleCopy('id')"/>
                            </el-tooltip>                                    
                        </template>
                        <template #append>
                            <el-tooltip content="刷新ID" placement="top">
                                <my-icon class="fc-icon" name="el-icon-RefreshRight" size="14" @click="handleRefresh('id')"/>
                            </el-tooltip>                                    
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="Class：">
                    <el-input v-model="props.data.options.class" clearable/>
                </el-form-item>

                
                <el-form-item v-if="props.data.group == 'main'" label="是否禁用：">
                    <el-switch v-model="props.data.options.disabled" />
                </el-form-item>

                <slot name="properties" />

                <el-divider>样式设置</el-divider>

                <el-form-item label="颜色：">
                    <div class="little-bear-color-input">
                        <el-input v-model="props.data.options.colour" clearable>
                            <template #append>
                                <el-color-picker v-model="props.data.options.colour"/>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>

                <el-form-item label="背景颜色：">
                    <div class="little-bear-color-input">
                        <el-input v-model="props.data.options.backgroundColour" clearable>
                            <template #append>
                                <el-color-picker v-model="props.data.options.backgroundColour"/>
                            </template>
                        </el-input>
                    </div>
                </el-form-item>

                <el-form-item label="透明度：">
                    <el-col :span="18"><el-slider v-model="props.data.options.transparency" :max="100"/> </el-col>
                    <el-col :span="6" style="padding-left: 12px;"> {{ props.data.options.transparency }} %</el-col>
                </el-form-item>

                <el-form-item label="缩放：">
                    <el-col :span="18"><el-slider v-model="props.data.options.scale" :min="80" :max="120"/> </el-col>
                    <el-col :span="6" style="padding-left: 12px;"> {{ props.data.options.scale }} %</el-col>
                </el-form-item>

                <!-- 开始 尺寸设置 -->
                <el-form-item label="尺寸："></el-form-item>                            
                <div class="little-bear-ci-append">
                    <div class="little-bear-box-size-input">
                        <el-form size="small" label-position="top" label-width="120px" >
                            <el-form-item label="宽度">
                                <el-input type="number" v-model="props.data.options.sizes.width.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.sizes.width.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="高度">
                                <el-input type="number" v-model="props.data.options.sizes.height.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.sizes.height.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="最小宽度">
                                <el-input type="number" v-model="props.data.options.sizes.minWidth.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.sizes.minWidth.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="最小高度">
                                <el-input type="number" v-model="props.data.options.sizes.minHeight.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.sizes.minHeight.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="最大宽度">
                                <el-input type="number" v-model="props.data.options.sizes.maxWidth.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.sizes.maxWidth.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="最大高度">
                                <el-input type="number" v-model="props.data.options.sizes.maxHeight.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.sizes.maxHeight.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="溢出" style="grid-column: span 2;">
                                <el-radio-group v-model="props.data.options.sizes.overflow">
                                    <el-radio-button value="visible"> <my-icon name="el-icon-View" size="12" /></el-radio-button>
                                    <el-radio-button value="hidden" ><my-icon name="el-icon-Hide" size="12" /></el-radio-button>
                                    <el-radio-button value="scroll"><my-icon name="el-icon-Operation" size="12" /></el-radio-button>
                                    <el-radio-button value="auto">自适应</el-radio-button>
                                    <el-radio-button value="">空</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                    </div>                    
                </div>                
                <!-- 结束 尺寸设置 -->

                <!-- 开始 边距设置 -->
                <el-form-item label="边距："></el-form-item>   
                <div class="little-bear-style-config">
                    <div class="little-bear-box-space-input" style="margin-bottom: 10px;">
                        <div class="_padding">
                            <span class="_padding-title">外边距</span>
                            <input class="little-bear-input little-bear-top" name="top" placeholder="        " type="text" @change="emitPaddingChange" v-model="props.data.options.padding.top">
                            <input class="little-bear-input little-bear-right" name="right" placeholder="        " type="text" @change="emitPaddingChange" v-model="props.data.options.padding.right">
                            <input class="little-bear-input little-bear-bottom" name="bottom" placeholder="        " type="text" @change="emitPaddingChange" v-model="props.data.options.padding.bottom">
                            <input class="little-bear-input little-bear-left" name="left" placeholder="        " type="text" @change="emitPaddingChange" v-model="props.data.options.padding.left">
                            <div class="little-bear-help">
                                <my-icon class="fc-icon" :class="{ active: paddingActive }" name="el-icon-Link" size="12" @click="paddingHandleUnified" />
                                <my-icon class="fc-icon" name="el-icon-DeleteFilled" size="12" @click="paddingHandleDel" />
                            </div>
                            <div class="_margin">
                                <span class="_margin-title">内边距</span>
                                <div class="little-bear-help">
                                    <my-icon class="fc-icon" :class="{ active: marginActive }" name="el-icon-Link" size="12" @click="marginHandleUnified"/>
                                    <my-icon class="fc-icon" name="el-icon-DeleteFilled" size="12" @click="marginHandleDel"/>
                                </div>
                                <input class="little-bear-input little-bear-top" name="top" placeholder="        " type="text" @change="emitMarginChange" v-model="props.data.options.margin.top">
                                <input class="little-bear-input little-bear-right" name="right" placeholder="        " type="text" @change="emitMarginChange" v-model="props.data.options.margin.right">
                                <input class="little-bear-input little-bear-bottom" name="bottom" placeholder="        " type="text" @change="emitMarginChange" v-model="props.data.options.margin.bottom">
                                <input class="little-bear-input little-bear-left" name="left" placeholder="        " type="text" @change="emitMarginChange" v-model="props.data.options.margin.left">
                                <div class="_box"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 结束 边距设置 -->
                
                <!-- 开始 边框设置 -->
                <el-form-item label="边框：">
                    <div class="little-bear-ci-con">
                        <div class="line-box" :style="frameStyle">
                            <div class="line-box-con"></div>
                        </div>
                    </div>
                </el-form-item>
                <div class="little-bear-ci-append" style="">
                    <div class="little-bear-border-input">
                        <div class="little-bear-bi-left">
                            <div class="little-bear-bil-row">
                                <div class="little-bear-bil-col" :class="{ active: frameActiveType == 'top' }" @click="frameActiveType = 'top'">┳ </div>
                            </div>
                            <div class="little-bear-bil-row">
                                <div class="little-bear-bil-col" :class="{ active: frameActiveType == 'left' }" @click="frameActiveType = 'left'">┣ </div>
                                <div class="little-bear-bil-col" :class="{ active: frameActiveType == 'middle' }" @click="frameActiveType = 'middle'">╋</div>
                                <div class="little-bear-bil-col" :class="{ active: frameActiveType == 'right' }" @click="frameActiveType = 'right'"> ┫ </div>
                            </div>
                            <div class="little-bear-bil-row">
                                <div class="little-bear-bil-col" :class="{ active: frameActiveType == 'bottom' }" @click="frameActiveType = 'bottom'">┻ </div>
                            </div>
                        </div>
                        <!-- 边框 上面设置 -->
                        <div class="little-bear-bi-right" v-if="frameActiveType == 'top'">
                            <el-select v-model="props.data.options.frame.top.type" clearable>
                                <el-option v-for="item in frame.option" :key="item.value" :label="item.label" :value="item.value">
                                    <div style="width: 100%; display: flex; height: 100%; align-items: center;">
                                        <div :style="item.style"></div>
                                    </div>                                            
                                </el-option>
                            </el-select>

                            <el-input type="number" v-model="props.data.options.frame.top.coarseAndFine.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.frame.top.coarseAndFine.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>

                            <div class="little-bear-color-input">
                                <el-input v-model="props.data.options.frame.top.colour">
                                    <template #append>
                                        <el-color-picker v-model="props.data.options.frame.top.colour"/>
                                    </template>
                                </el-input>
                            </div>
                        </div>

                        <!-- 边框 左边设置 -->
                        <div class="little-bear-bi-right" v-else-if="frameActiveType == 'left'">
                            <el-select v-model="props.data.options.frame.left.type" clearable>
                                <el-option v-for="item in frame.option" :key="item.value" :label="item.label" :value="item.value">
                                    <div style="width: 100%; display: flex; height: 100%; align-items: center;">
                                        <div :style="item.style"></div>
                                    </div>                                            
                                </el-option>
                            </el-select>
                            
                            <el-input type="number" v-model="props.data.options.frame.left.coarseAndFine.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.frame.left.coarseAndFine.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>

                            <div class="little-bear-color-input">
                                <el-input v-model="props.data.options.frame.left.colour">
                                    <template #append>
                                        <el-color-picker v-model="props.data.options.frame.left.colour"/>
                                    </template>
                                </el-input>
                            </div>
                        </div>

                        <!-- 边框 全局设置 -->
                        <div class="little-bear-bi-right" v-else-if="frameActiveType == 'middle'">
                            <el-select v-model="props.data.options.frame.middle.type" clearable>
                                <el-option v-for="item in frame.option" :key="item.value" :label="item.label" :value="item.value">
                                    <div style="width: 100%; display: flex; height: 100%; align-items: center;">
                                        <div :style="item.style"></div>
                                    </div>                                            
                                </el-option>
                            </el-select>
                            <el-input type="number" v-model="props.data.options.frame.middle.coarseAndFine.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.frame.middle.coarseAndFine.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                            <div class="little-bear-color-input">
                                <el-input v-model="props.data.options.frame.middle.colour">
                                    <template #append>
                                        <el-color-picker v-model="props.data.options.frame.middle.colour"/>
                                    </template>
                                </el-input>
                            </div>
                        </div>

                        <!-- 边框 右边设置 -->
                        <div class="little-bear-bi-right" v-else-if="frameActiveType == 'right'">
                            <el-select v-model="props.data.options.frame.right.type" clearable>
                                <el-option v-for="item in frame.option" :key="item.value" :label="item.label" :value="item.value">
                                    <div style="width: 100%; display: flex; height: 100%; align-items: center;">
                                        <div :style="item.style"></div>
                                    </div>                                            
                                </el-option>
                            </el-select>
                            <el-input type="number" v-model="props.data.options.frame.right.coarseAndFine.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.frame.right.coarseAndFine.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                            <div class="little-bear-color-input">
                                <el-input v-model="props.data.options.frame.right.colour">
                                    <template #append>
                                        <el-color-picker v-model="props.data.options.frame.right.colour" />
                                    </template>
                                </el-input>
                            </div>
                        </div>

                        <!-- 边框 下面设置 -->
                        <div class="little-bear-bi-right" v-else-if="frameActiveType == 'bottom'">
                            <el-select v-model="props.data.options.frame.bottom.type" clearable>
                                <el-option v-for="item in frame.option" :key="item.value" :label="item.label" :value="item.value">
                                    <div style="width: 100%; display: flex; height: 100%; align-items: center;">
                                        <div :style="item.style"></div>
                                    </div>                                            
                                </el-option>
                            </el-select>
                            <el-input type="number" v-model="props.data.options.frame.right.coarseAndFine.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.frame.right.coarseAndFine.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                            <div class="little-bear-color-input">
                                <el-input v-model="props.data.options.frame.bottom.colour">
                                    <template #append>
                                        <el-color-picker v-model="props.data.options.frame.bottom.colour"/>
                                    </template>
                                </el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 结束 边框设置 -->

                <!-- 开始 圆角设置 -->
                <el-form-item label="圆角：">
                    <!-- <div class="little-bear-size-input">
                        <el-input v-model="form.borderRadius" />
                        <el-dropdown @command="handleBorderRadiusUnitChanged">
                            <el-button>px</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="px">px</el-dropdown-item>
                                    <el-dropdown-item command="%">%</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div> -->
                </el-form-item>
                <div class="little-bear-ci-append">
                    <div class="little-bear-radius-con">
                        <div class="little-bear-radius-item">
                            <div class="little-bear-radius-icon" style="transform: rotate(180deg);">
                                <my-icon class="fc-icon little-bear-radius-icon" name="local-icon-right" size="16" />
                            </div>
                            <el-input type="number" v-model="props.data.options.borderRadius.topLeft.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.borderRadius.topLeft.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                        </div>
                        <div class="little-bear-radius-item">
                            <div class="little-bear-radius-icon" style="transform: rotate(-90deg);">
                                <my-icon class="fc-icon little-bear-radius-icon" name="local-icon-right" size="16" />
                            </div>
                            <el-input type="number" v-model="props.data.options.borderRadius.topRight.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.borderRadius.topRight.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                        </div>
                        <div class="little-bear-radius-item">
                            <div class="little-bear-radius-icon" style="transform: rotate(90deg);">
                                <my-icon class="fc-icon little-bear-radius-icon" name="local-icon-right" size="16" />
                            </div>
                            <el-input type="number" v-model="props.data.options.borderRadius.bottomLeft.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.borderRadius.bottomLeft.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                        </div>
                        <div class="little-bear-radius-item">
                            <div class="little-bear-radius-icon">
                                <my-icon class="fc-icon little-bear-radius-icon" name="local-icon-right" size="16" />
                            </div>
                            <el-input type="number" v-model="props.data.options.borderRadius.bottomRight.value" clearable>
                                <template #append>
                                    <el-select v-model="props.data.options.borderRadius.bottomRight.unit" style="width: 60px;">
                                        <el-option label="px" value="px" />
                                        <el-option label="auto" value="auto" />
                                        <el-option label="%" value="%" />
                                        <el-option label="vh" value="vh" />
                                        <el-option label="vw" value="vw" />
                                        <el-option label="em" value="em" />
                                        <el-option label="rem" value="rem" />
                                    </el-select>
                                </template>
                            </el-input>
                        </div>
                    </div>
                </div>
                <!-- 结束 圆角设置 -->

                <!-- 开始 字体设置 -->
                <el-form-item label="字体：">
                    <div class="little-bear-ci-con">
                        <div class="little-bear-fi-box">样式预览</div>
                    </div>
                </el-form-item>                            
                <div class="little-bear-ci-append">
                    <div class="little-bear-font-input">
                        <el-form size="small" label-position="top" label-width="120px" >
                            <el-form-item label="大小">
                                <el-input type="number" v-model="props.data.options.font.size.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.font.size.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="粗细">                                
                                <el-input type="number" v-model="props.data.options.font.weight" clearable/>
                            </el-form-item>
                            <el-form-item label="修饰"> 
                                <el-select v-model="props.data.options.font.modify" clearable>
                                    <el-option v-for="item in findFont.modify" :key="item.value" :label="item.label" :value="item.value">
                                        <span :style="item.style">{{ item.label }}</span>                                            
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="对齐方式">
                                <el-select v-model="props.data.options.font.textAlign" clearable>
                                    <el-option v-for="item in findFont.textAlign" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="行高">
                                <el-input type="number" v-model="props.data.options.font.rowHeight.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.font.rowHeight.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="字间距">
                                <el-input type="number" v-model="props.data.options.font.spacing.value" clearable>
                                    <template #append>
                                        <el-select v-model="props.data.options.font.spacing.unit" style="width: 60px;">
                                            <el-option label="px" value="px" />
                                            <el-option label="auto" value="auto" />
                                            <el-option label="%" value="%" />
                                            <el-option label="vh" value="vh" />
                                            <el-option label="vw" value="vw" />
                                            <el-option label="em" value="em" />
                                            <el-option label="rem" value="rem" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>                    
                </div>                
                <!-- 结束 字体设置 -->


                <!-- 开始 自定义 -->
                <el-form-item label="自定义："></el-form-item>
                <div class="little-bear-ci-append">
                    <div class="little-bear-table-opt">
                        <el-table :data="props.data.options.customizeStyle" border empty-text="空">
                            <el-table-column prop="keyname" label="键名">
                                <template #default="{ row }">
                                    <el-input v-model="row.keyname" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="value" label="值">
                                <template #default="{ row }">
                                    <el-input v-model="row.value"/>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="50">
                                <template #default="{ $index,row }">
                                    <el-button type="danger" icon="Delete" circle @click="handleCustomizeDel($index)" />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="little-bear-table-opt-handle">
                            <el-button type="primary" link icon="CirclePlus" @click="handleCustomizeAdd"> 新增</el-button>
                        </div>
                    </div>
                </div>
                <!-- 结束 自定义 -->

                <el-divider>事件设置</el-divider>

                <el-button type="primary" plain @click="handleDialogEvent" style="width: 100%;">设置事件</el-button>

                <el-divider>验证设置</el-divider>

                <div class="little-bear-validate" v-for="(item, index) in props.data.validate.value" :key="index" >
                    <div class="little-bear-validate-item">
                        <div class="little-bear-validate-title">
                            <div><span>{{ index + 1 }}</span>{{ item.title }}</div>
                            <my-icon name="el-icon-DeleteFilled" size="14" @click="handleValidateDel(index)"/>
                        </div>                        
                        <el-form label-position="top" size="small">
                            <el-row>
                                <el-col :span="item.type == 'min' || item.type == 'max' || item.type == 'length' ? 12 : 24">
                                    <el-form-item label="验证方式">
                                        <el-select v-model="item.trigger">
                                            <el-option 
                                                v-for="(triggerOptionsItem, triggerOptionsIndex) in findValidate.triggerOptions" 
                                                :key="triggerOptionsItem.value" 
                                                :label="triggerOptionsItem.label" 
                                                :value="triggerOptionsItem.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                                <el-col v-if="item.type != 'required'" :span="item.type == 'min' || item.type == 'max' || item.type == 'length' ? 12 : 24">
                                    <el-form-item :label="item.valueName">
                                        <el-input-number v-if="item.type == 'min' || item.type == 'max' || item.type == 'length'" v-model="item.value" />
                                        <el-input v-if="item.type == 'regular'" v-model="item.value" />
                                        <el-button v-if="item.type == 'customize'" type="primary" plain @click="handleDialogCustomizeValidate(item, index)" style="width: 100%;">自定义验证</el-button>
                                    </el-form-item>                                    
                                </el-col>

                                <el-col :span="24">
                                    <el-form-item label="错误信息">
                                        <el-input v-model="item.msg" />
                                    </el-form-item>  
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </div>

                <el-dropdown style="width: 100%;" trigger="click" @command="handleVerifySelect">
                    <el-button type="primary" plain style="width: 100%;">验证规则 <my-icon name="el-icon-Plus" size="14" /></el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, index) in findValidate.option" :key="item.value" :command="item.value" style="width: 270px;">{{ item.label }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </el-col>
        </el-row>
    </el-form>

    <!-- 事件编辑配置 -->
    <el-dialog v-model="findEvent.dialogStatus" draggable class=" little-bear-event-dialog" title="事件设置" width="60%" @close = "handleCodeEditEventCancel">
        <el-container class="little-bear-event-con" style="height: 600px;">
            <el-aside style="width: 300px;">
                <el-container class="little-bear-event-l">
                    <el-header class="little-bear-event-head" style="--el-header-height: 40px;">
                        <el-dropdown trigger="click" @command="handleCreateEvent">
                            <el-button type="primary" link>创建事件</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="(item, index) in findEvent.codeOption" :command="item.type" :divided="item.divided" :disabled="findEvent.codeValue.find(itemt => itemt.type == item.type) ? true : false">
                                        <div class="little-bear-event-item">
                                            <span>{{ item.type }}</span>
                                            <span class="little-bear-label">{{ item.describe }}</span>
                                        </div>                                        
                                    </el-dropdown-item>                                   
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-header>
                    <el-main>
                        <el-menu>
                            <el-menu-item v-for="(item, index) in findEvent.codeValue" :class="{'is-active': findEvent.codeSelectSing == item.type}" @click="handleCodeEditEventSelect(item.type)"> 
                                <div class="little-bear-event-title">
                                    <div class="little-bear-event-method">
                                        <span>function<span>{{ item.type }}</span></span>
                                        <span class="little-bear-label">{{ item.describe }}</span>
                                    </div>
                                    <my-icon class="fc-icon" name="el-icon-DeleteFilled" size="14" @click="handleCodeEditEventDel(index)"></my-icon>
                                </div>                                
                            </el-menu-item>
                            
                        </el-menu>
                    </el-main>
                </el-container>
            </el-aside>
            <el-main>
                <el-container class="little-bear-event-r">
                    <el-header class="little-bear-fn-list-head" style="--el-header-height: 40px;">
                        <!-- <el-button>取消</el-button>
                        <el-button type="primary">保存</el-button> -->
                    </el-header>
                    <el-main>
                        <code-edit v-show="findEvent.codeStatus" ref="fromEventCodeEditRef" @change="handleCodeEditEventChange"></code-edit>
                    </el-main>
                </el-container>                
            </el-main>
        </el-container>
        <template #footer>
            <div>
                <el-button @click="handleCodeEditEventCancel">取消</el-button>
                <el-button type="primary" @click="handleCodeEditEventSave">保存</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 自定义规则编辑 -->
    <el-dialog v-model="findValidate.customizeCode.dialogStatus" draggable title="自定义规则" width="60%" @close = "handleCodeEditCustomizeValidateCancel">
        
        <div style="height: 500px;">
            <code-edit v-show="findValidate.customizeCode.codeStatus" ref="findCustomizeValidateCodeEditRef" @change="handleCodeEditCustomizeValidateChange"></code-edit>
        </div>
        
        <template #footer>
            <div>
                <el-button @click="handleCodeEditCustomizeValidateCancel">取消</el-button>
                <el-button type="primary" @click="handleCodeEditCustomizeValidateSave">保存</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import * as monaco from "monaco-editor"
import { Discount, Grid } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { deepCopy, deepMerge, uuid, capitalizeFirstLetter } from "@/utils/index"

// 接收父节传入点参数
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})

// 折叠栏
const activeNames = ref(['1'])

// 边框值/参数
const frame = reactive({
    option: [
        {style:"border: 1px solid #000; width: 100%;",value:"solid", label:"实线"},
        {style:"border: 1px dashed #000; width: 100%;",value:"dashed", label:"虚线"},
        {style:"border: 1px dotted #000; width: 100%;",value:"dotted", label:"点状虚线"},
        {style:"border: 1px double #000; width: 100%;",value:"double", label:"双实线"},
    ],
    value: {
        top: {
            type: "", // 类型
            coarseAndFine: { // 粗细
                value: "", // 数值
                unit: "px" // 单位
            }, 
            colour: "", // 颜色
        },
        right: {
            type: "", // 类型
            coarseAndFine: { // 粗细
                value: "", // 数值
                unit: "px" // 单位
            }, 
            colour: "", // 颜色
        },
        bottom: {
            type: "", // 类型
            coarseAndFine: { // 粗细
                value: "", // 数值
                unit: "px" // 单位
            }, 
            colour: "", // 颜色
        },
        left: {
            type: "", // 类型
            coarseAndFine: { // 粗细
                value: "", // 数值
                unit: "px" // 单位
            }, 
            colour: "", // 颜色
        },
        middle:  {
            type: "", // 类型
            coarseAndFine: { // 粗细
                value: "", // 数值
                unit: "px" // 单位
            }, 
            colour: "", // 颜色
        },
    }
})

// 边框映射样式
let frameStyle = reactive({})

// 边距选取状态
let paddingActive = ref(false)

// 外边距选取状态
let marginActive = ref(false)

// 边框演样式类型
let frameActiveType = ref("middle")

// 字段相关
const findFont = reactive({
    modify: [ // 修饰选项
        {style: "text-decoration: underline;", label: "下划线", value: "underline"},
        {style: "text-decoration: line-through;", label: "删除线", value: "line-through"},
        {style: "text-decoration: overline;", label: "上划线", value: "overline"}
    ],
    textAlign:[ // 对齐方式选项
        {label: "左对齐", value: "left"},
        {label: "居中", value: "center"},
        {label: "右对齐", value: "right"}
    ],
})

// 自定义编辑器编号
const findCustomizeValidateCodeEditRef = ref("")

// 验证
const findValidate = reactive({ 
    option: [ // 选项
        {label: "必填", value: "required"},
        {label: "最小值", value: "min"},
        {label: "最大值", value: "max"},
        {label: "长度", value: "length"},
        {label: "正则表达式", value: "regular"},
        {label: "自定义", value: "customize"}
    ],
    triggerOptions: [ // 触发选项
        {label:"失去焦点", value:"blur"},
        {label:"改变", value:"change"},
        {label:"提交", value:"submit"},
    ],
    customizeCode: {
        dialogStatus: false, // 弹窗状态
        codeStatus: false, // 代码编辑状态
        currentIndex: null, // 先正在编辑的自定义代码编号
        value: [], // 自定义代码值
    }    
})

// 事件编辑器编号
const fromEventCodeEditRef = ref("")

// 事件编辑
const findEvent = reactive({
    dialogStatus: false, // 弹窗状态
    codeStatus: false, // 编写代码状态
    codeSelectSing: "", // 选择的事件
    codeValue: [], // 每个事件的代码
    codeOption: [ // 事件选项
    {
        type: "blur", 
        describe: "失去焦点时触发",
        selectStatus: false,
        code:`function blur($inject) {
}`
    },
    {
        type: "focus", 
        describe: "获得焦点时触发",
        selectStatus: false,
        code:`function focus($inject) {
}`
    },
    {
        type: "change", 
        describe: "当值改变时，当组件失去焦点或用户安Enter时触发",
        selectStatus: false,
        code:`function change($inject) {
}`
    },
    {
        type: "input", 
        describe: "在值改变时触发",
        selectStatus: false,
        code:`function input($inject) {
}`
    },
    {
        type: "clear", 
        describe: "点击清空按钮时触发",
        selectStatus: false,      
        code:`function clear($inject) {
}`
    },    
    {
        type: "hook_load", 
        describe: "组件规则加载后触发",
        selectStatus: false,
        divided: true,
        code:`function hook_load($inject) {
}`
    },
    {
        type: "hook_mounted", 
        describe: "组件挂载后触发",
        selectStatus: false,
        code:`function hook_mounted($inject) {
}`
    },
    {
        type: "hook_del", 
        describe: "组件规则被移除后触发",
        selectStatus: false,
        code:`function hook_del($inject) {
}`
    },
    {
        type: "hook_watch", 
        describe: "组件规则发生变化后触发",
        selectStatus: false,
        code:`function hook_watch($inject) {
}`
    },
    {
        type: "hook_value", 
        describe: "组件的值发生变化后触发",
        selectStatus: false,
        code:`function hook_value($inject) {
}`
    },
    {
        type: "hook_hidden", 
        describe: "组件显示状态发生变化后触发",
        selectStatus: false,
        code:`function hook_hidden($inject) {
}`
    },    
]
})


/**
 * 编号/ID 复制
 * @param sign  标识
 */
const handleCopy = async (sign) => {
    try {
        if(sign == 'ref'){
            await navigator.clipboard.writeText(props.data.options.ref)
        }else if(sign == 'id'){
            await navigator.clipboard.writeText(props.data.options.id)
        }
        ElMessage({  message: "复制成功", type: 'success'})
    } catch (err) {
        ElMessage.error(err)
    }
}

/**
 * 编号/ID 刷新
 * @param sign  标识
 */
const handleRefresh = (sign) => {
    let key = uuid()
    // "id_" +  key
    if(sign == 'ref'){
    }else if(sign == 'id'){
    }
}

/**
 * 设置外边距统一状态
 */
const paddingHandleUnified = () => {
    paddingActive.value = !paddingActive.value
}

/**
 * 设置外边距删除
 */
const paddingHandleDel = () => {
    props.data.options.padding.top = ""
    props.data.options.padding.right = ""
    props.data.options.padding.bottom = ""
    props.data.options.padding.left = ""
}

/**
 * 外边距输入框值改变
 * @param e 输入框事件
 */
const emitPaddingChange = (e) => {
    const regex = /(^\d+)(\D+)$/; // 匹配开头的数字和后面的非数字字符
    const result = e.srcElement.value.match(regex);

    if(paddingActive.value){
         let hz = !result ? "px" : ""
        props.data.options.padding.top = e.srcElement.value + hz
        props.data.options.padding.right = e.srcElement.value + hz
        props.data.options.padding.bottom = e.srcElement.value + hz
        props.data.options.padding.left = e.srcElement.value + hz
    }else if(e.srcElement.value){
        if(!result){
            props.data.options.padding[e.target.name] = e.srcElement.value + "px" 
        }
    }
}

/**
 * 设置内边距统一状态
 */
const marginHandleUnified = () => {
    marginActive.value = !marginActive.value
}

/**
 * 设置内边距删除
 */
const marginHandleDel = () => {
    props.data.options.margin.top = ""
    props.data.options.margin.right = ""
    props.data.options.margin.bottom = ""
    props.data.options.margin.left = ""
}

/**
 * 内边距输入框值改变
 * @param e 输入框事件
 */
const emitMarginChange = (e) => {
    const regex = /(^\d+)(\D+)$/; // 匹配开头的数字和后面的非数字字符
    const result = e.srcElement.value.match(regex);

    if(marginActive.value){
        let hz = !result ? "px" : ""
        props.data.options.margin.top = e.srcElement.value + hz
        props.data.options.margin.right = e.srcElement.value + hz
        props.data.options.margin.bottom = e.srcElement.value + hz
        props.data.options.margin.left = e.srcElement.value + hz
    }else if(e.srcElement.value){
        if(!result){
            props.data.options.margin[e.target.name] = e.srcElement.value + "px" 
        }
    }
}




/**
 * 圆角-统一设置
 * @param unit 单位
 */
const handleBorderRadiusUnitChanged = (unit) => {
    props.data.options.sizes.maxHeight.unit = unit
}

/**
 * 自定义属性新增
 */
const handleCustomizeAdd = () => {
    props.data.options.customizeStyle.push({keyname: "", value: ""})
}

/**
 * 自定义属性删除
 */
const handleCustomizeDel = (index) => {
    props.data.options.customizeStyle.splice(index, 1); // 直接删除指定索引项
}

/**
 * 验证规则选择创建
 * @param sign 选择的标识
 */
const handleVerifySelect = (sign) => {
    if(sign == "min"){
        props.data.validate.value.push({
            type: "min", // 最小长度  
            title: "最小长度", // 规则名称      
            valueName: "最小值", // 值名称
            trigger: "", // 验证触发方式         
            value: "", // 值
            msg: "", // 提示信息
        })
    }else if(sign == "max"){
        props.data.validate.value.push({
            type: "max", // 最小长度
            title: "最大长度", // 规则名称            
            valueName: "最大值", // 值名称
            trigger: "", // 验证触发方式     
            value: "", // 值
            msg: "", // 提示信息
        })

    }else if(sign == "length"){
        props.data.validate.value.push({
            type: "length", // 最小长度
            title: "长度", // 规则名称           
            valueName: "长度", // 值名称
            trigger: "", // 验证触发方式     
            value: "", // 值
            msg: "", // 提示信息
        })

    }else if(sign == "regular"){
        props.data.validate.value.push({
            type: "regular", // 最小长度
            title: "正则表达式", // 规则名称
            valueName: "正则表达式", // 值名称
            trigger: "", // 验证触发方式     
            value: "", // 值
            msg: "", // 提示信息
        })

    }else if(sign == "customize"){
        let index = props.data.validate.value.push({
            type: "customize", // 最小长度
            title: "自定义", // 规则名称            
            valueName: "自定义验证", // 值名称
            trigger: "", // 验证触发方式     
            // 值
            value: `function customizeValidate(rule, value, callback) {
}`, // 值
            msg: "", // 提示信息
        })

        // 添加临时代码
        findValidate.customizeCode.value.push({
            index: index - 1,
            value: `function customizeValidate(rule, value, callback) {
}`
        })
    }else if(sign == "required"){
        props.data.validate.value.push({
            type: "required", // 最小长度  
            title: "必填", // 规则名称      
            valueName: "必填", // 值名称
            trigger: "", // 验证触发方式         
            value: "", // 值
            msg: "", // 提示信息
        })
    }
}

/**
 * 验证规则删除
 * @param index 索引
 */
const handleValidateDel = (index) => {
    // 直接删除指定索引项
    props.data.validate.value.splice(index, 1)

    // 获取临时验证下标
    let selectCustomizeValidateIndex = findValidate.customizeCode.value.findIndex(item => item.index === index)

    // 删除临时验证对应的数据
    findValidate.customizeCode.value.splice(selectCustomizeValidateIndex, 1)
}

/**
 * 验证显示自定义验证弹窗
 */
const handleDialogCustomizeValidate = (param, index) => {
    // 获取临时验证下标
    let selectCustomizeValidateIndex = findValidate.customizeCode.value.findIndex(item => item.index === index)

    // 自定义验证编辑器弹窗显示
    findValidate.customizeCode.dialogStatus = true
    
    // 使用 nextTick 确保 DOM 更新完成
    nextTick(() => {
        // 编辑器显示
        findValidate.customizeCode.codeStatus = true

        // 代码编辑器赋值
        if (findCustomizeValidateCodeEditRef.value) {
            findCustomizeValidateCodeEditRef.value.setEditorValue(
                findValidate.customizeCode.value[selectCustomizeValidateIndex].value
            ) 
        }

        // 存储现在正在编辑的自定义验证下标
        findValidate.customizeCode.currentIndex = selectCustomizeValidateIndex
    })
   
}

/**
 * 验证代码编辑器代码值改变
 * @param codeValue 代码值
 */
const handleCodeEditCustomizeValidateChange = (codeValue) => {
     // 使用nextTick确保DOM更新后执行
     nextTick(() => {
        // 更新当前索引对应的自定义验证代码值
        findValidate.customizeCode.value[findValidate.customizeCode.currentIndex].value = codeValue
    })
}
    
/**
 * 验证代码编辑器代码保存
 */
const handleCodeEditCustomizeValidateSave = () => {
    props.data.validate.value[findValidate.customizeCode.value[findValidate.customizeCode.currentIndex].index].value = findValidate.customizeCode.value[findValidate.customizeCode.currentIndex].value
    findValidate.customizeCode.codeStatus = false
    // findCustomizeValidateCodeEditRef.value.setEditorValue("")
    findValidate.customizeCode.dialogStatus = false
    findValidate.customizeCode.currentIndex = null
}

/**
 * 验证代码编辑器代码取消
 */
const handleCodeEditCustomizeValidateCancel = () => {
    findValidate.customizeCode.value[findValidate.customizeCode.currentIndex].value = props.data.validate.value[findValidate.customizeCode.value[findValidate.customizeCode.currentIndex].index].value
    findValidate.customizeCode.codeStatus = false
    // findCustomizeValidateCodeEditRef.value.setEditorValue("")
    findValidate.customizeCode.dialogStatus = false
    findValidate.customizeCode.currentIndex = null
}


/**
 * 显示事件弹窗
 */
const handleDialogEvent = () => { 
    findEvent.dialogStatus = true
    findEvent.codeValue = deepCopy(props.data.event.value)
}

/**
 * 创建事件
 * @param sign 选择的标识
 */
const handleCreateEvent = (sign) => {  
    if(!findEvent.codeValue.find(item => item.type === sign)){
        findEvent.codeSelectSing = sign
        let selectEventIndex = findEvent.codeOption.findIndex(item => item.type === sign)
        findEvent.codeValue.push(findEvent.codeOption[selectEventIndex])       
        fromEventCodeEditRef.value.setEditorValue(findEvent.codeOption[selectEventIndex].code)
        findEvent.codeOption[selectEventIndex].selectStatus = true
        findEvent.codeStatus = true
    }
}

/**
 * 选择事件
 * @param sign 选择的标识
 */
const handleCodeEditEventSelect = (sign) => {
    findEvent.codeSelectSing = sign 
    let selectEvent = findEvent.codeValue.find(item => item.type == sign)
    fromEventCodeEditRef.value.setEditorValue(selectEvent.code)
    findEvent.codeStatus = true
}

/**
 * 删除事件
 * @param index 
 */
const handleCodeEditEventDel = (index) => {    
    findEvent.codeSelectSing = ""
    findEvent.codeStatus = false 
    fromEventCodeEditRef.value.setEditorValue("")
    findEvent.codeValue.splice(index, 1)
}



/**
 * 事件代码编辑器值改变
 * @param codeValue 代码值
 */
const handleCodeEditEventChange = (codeValue) => {    
    if(findEvent.codeSelectSing){
        let selectEventIndex = findEvent.codeValue.findIndex(item => item.type === findEvent.codeSelectSing)
        findEvent.codeValue[selectEventIndex].code = codeValue
    }
    
}


/**
 *事件 代码编辑器代码保存
 * @param codeValue 代码值
 */
const handleCodeEditEventSave = () => {
    props.data.event.value = deepCopy(findEvent.codeValue)

    findEvent.codeValue = []
    findEvent.codeSelectSing = ""   
    findEvent.dialogStatus = false
    findEvent.codeStatus = false
    fromEventCodeEditRef.value.setEditorValue("")
}

/**
 * 事件代码编辑器代码取消
 * @param codeValue 代码值
 */
const handleCodeEditEventCancel = () => {
    findEvent.codeValue = []
    findEvent.codeSelectSing = ""   
    findEvent.dialogStatus = false
    findEvent.codeStatus = false
    fromEventCodeEditRef.value.setEditorValue("")
}

/**
 * 标签宽度单位积改变触发
 * @param unit 单位
 */
 const handleLabelWidthUnitChanged = (unit) => {
    props.data.options.labelWidth.unit = unit
}


watch(() => 
    props.data, 
    (newVal, oldVal) => {

        /******************************* 边框样式 *******************************/

        //  边距元素对象
        let frameEm = document.getElementsByClassName("little-bear-ci-con")[0]

        frameEm.style.borderStyle = props.data.options.frame.middle.type
        frameEm.style.borderWidth = props.data.options.frame.middle.coarseAndFine.value ? props.data.options.frame.middle.coarseAndFine.value + props.data.options.frame.middle.coarseAndFine.unit : ""    
        frameEm.style.borderColor = props.data.options.frame.middle.colour

        frameEm.style.borderTopStyle = props.data.options.frame.top.type
        frameEm.style.borderTopWidth = props.data.options.frame.top.coarseAndFine.value ? props.data.options.frame.top.coarseAndFine.value + props.data.options.frame.top.coarseAndFine.unit : ""       
        frameEm.style.borderTopColor = props.data.options.frame.top.colour

        frameEm.style.borderRightStyle = props.data.options.frame.right.type
        frameEm.style.borderRightWidth = props.data.options.frame.right.coarseAndFine.value ? props.data.options.frame.right.coarseAndFine.value + props.data.options.frame.right.coarseAndFine.unit : ""
        frameEm.style.borderRightColor = props.data.options.frame.right.colour

        frameEm.style.borderRightStyle = props.data.options.frame.bottom.type
        frameEm.style.borderRightWidth = props.data.options.frame.bottom.coarseAndFine.value ? props.data.options.frame.bottom.coarseAndFine.value + props.data.options.frame.bottom.coarseAndFine.unit : ""
        frameEm.style.borderRightColor = props.data.options.frame.bottom.colour

        frameEm.style.borderLeftStyle = props.data.options.frame.left.type
        frameEm.style.borderLeftWidth = props.data.options.frame.left.coarseAndFine.value ? props.data.options.frame.left.coarseAndFine.value + props.data.options.frame.left.coarseAndFine.unit : ""   
        frameEm.style.borderLeftColor = props.data.options.frame.left.colour

        /******************************* 字体样式 *******************************/

        //  边距元素对象
        let fontEm = document.getElementsByClassName("little-bear-fi-box")[0]
        fontEm.style.fontSize = props.data.options.font.size.value ? props.data.options.font.size.value + props.data.options.font.size.unit : ""
        fontEm.style.lineHeight = props.data.options.font.rowHeight.value ? props.data.options.font.rowHeight.value + props.data.options.font.size.unit : ""
        fontEm.style.letterSpacing = props.data.options.font.spacing.value ? props.data.options.font.spacing.value + props.data.options.font.size.unit : ""
        
        fontEm.style.fontWeight = props.data.options.font.weight
        fontEm.style.textDecoration = props.data.options.font.modify ? props.data.options.font.modify : ""
        fontEm.style.textAlign = props.data.options.font.textAlign ? props.data.options.font.textAlign : ""

    }, 
    { deep: true }
)

</script>